<template>
  <div class="fenlei">
    <div class="img-wrapper">
      <img src="https://ts1.cn.mm.bing.net/th/id/R-C.14d3024d571077c0e5a045320ae9ecc0?rik=d%2bufKejv6kk8sw&riu=http%3a%2f%2fnwzimg.wezhan.cn%2fcontents%2fsitefiles2021%2f10109042%2fimages%2f3750151.jpg&ehk=5Dw9CAdoSJFFIWQfAduWPWiKEwLpunlm9c07dQRl7wI%3d&risl=&pid=ImgRaw&r=0
" alt="">
    </div>
    <div class="fenlei-btn-wrapper">
      <!-- :class="index === btnIndex ? 'active' : ''"
       如果index === btnIndex表达式的结果为true，则添加active类名，否则添加空字符串作为类名-->
      <div class="btn" v-for="(btn,index) of btns"
      :class="{'active':index === btnIndex}" @click="handClick(index)">{{ btn.text }}
      <!--  如果index === btnIndex表达式的结果为true，则添加active类名，否则不添加      -->
      </div>
    </div>
      <div class="content-wrapper">
        <div class="item" v-for="c of News">
          <div class="left">
            <img v-bind:src="c.thumbnail_pic_s" alt="">
          </div>
          <div class="right">
            <h1 class="title">{{ c.title }}</h1>
            <div class="text-wrapper">
              <span class="category-text">{{ c.category }}</span>
              <span class="date-text">{{ c.date }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import axios from "axios";


export default {
  name: "Cation",
  data() {
    return {
      news: [],
      btns: [
        {
          text: '汽车',
          parmText: 'qiche'
        },
        {
          text: '国内',
          parmText: 'guonei'
        },
        {
          text: '国际',
          parmText: 'guoji'
        },
        {
          text: '娱乐',
          parmText: 'yule'
        },
        {
          text: '体育',
          parmText: 'tiyu'
        },
        {
          text: '军事',
          parmText: 'junshi'
        },
        {
          text: '科技',
          parmText: 'keji'
        },
        {
          text: '财经',
          parmText: 'caijing'
        },
        {
          text: '游戏',
          parmText: 'youxi'
        }
      ],
      btnIndex: 0
    }
  },
  methods: {
    handClick(index){
      if (this.btnIndex !== index){
        this.btnIndex = index;
        this._cationNews()
      }
    },
    _cationNews() {
      // 发送ajax请求拿新闻数据
      axios.get('/juheNews',{
        params: {
          key: "655962c80fdaccf03709b567da3bc795",
          type: this.btns[this.btnIndex].parmText
        }
      }).then(res => {
        if(res.data.error_code === 0) {
          this.News = res.data.result.data;
          console.log(this.News)
        } else {
          alert('请求失败')
        }
      })
    }
  },
  created() {
    this._cationNews()
  }
}
</script>

<style scoped lang="stylus">
.fenlei
  margin-top 10px
  .img-wrapper
    width 100%
    height 200px
    img
      width 100%
      height 100%
  .fenlei-btn-wrapper
    display flex
    flex-wrap wrap
    justify-content center
    .btn
      height 22px
      padding 0 6px
      margin 5px 10px
      line-height 22px
      border 1px solid #ff0036
      border-radius 10px
      color #ff0036
    .active
      background-color #ff0036
      color #fff
  .content-wrapper
    margin-top 20px
    .item
      display flex
      width 100%
      height 70px
      padding 4px 0
      border-bottom 1px dotted #2d3a4b
      .left
        width 90px
        height 70px
        img
          width 90px
          height 70px
      .right
        display flex
        flex-wrap wrap
        align-content space-between
        box-sizing border-box
        padding-left 15px
        padding-bottom 15px
        .text-wrapper
          margin-left 20px
</style>